<!--html-->
<template>
  <el-dialog
      v-model="state.forgetPasswordDialog"
      title="忘记密码"
      width="400px"
  >
    <el-form class="login-form" :label-position="lablePosition" :rules="rules">
      <el-form-item label="账号" prop="account">
        <el-input v-model="forgetData.account" placeholder="请输入您的注册账号"/>
      </el-form-item>
      <el-form-item label="密码" prop="email">
        <el-input v-model="forgetData.email" placeholder="请输入您的注册邮箱"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <!-- 底部-->
      <div class="dialog-footer">
        <el-button @click="state.forgetPasswordDialog = false">取消</el-button>
        <el-button type="primary" @click="changePasswordDialog">
          下一步
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
      v-model="state.changePasswordDialog"
      title="修改密码"
      width="400px"
  >
    <el-form class="login-form" :label-position="lablePosition" :rules="rules">
      <el-form-item label="密码" prop="password">
        <el-input v-model="forgetData.password" placeholder="请输入您的密码"/>
      </el-form-item>
      <el-form-item label="确认密码" prop="repassword">
        <el-input v-model="forgetData.repassword" placeholder="请再次输入您的密码"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <!-- 底部-->
      <div class="dialog-footer">
        <el-button @click="state.changePasswordDialog = false">取消</el-button>
        <el-button type="primary" @click="state.changePasswordDialog = false">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>


<!--Javascript-->
<script lang="ts" setup>
import {reactive, ref} from "vue";

//表单对象接口
interface forgetData {
  account: number;
  email: string;
  password: string;
  repassword:string
}

//表单对象
const forgetData : forgetData = reactive({
  account:null,
  email: '',
  password:'',
  repassword: ''
})
//表格 和 输入框位置
const lablePosition = ref('top')

//表单输入规则
const rules = reactive({
  account: [
    { required: true, message: '请输入您的注册账号', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入您的注册邮箱', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入您的密码', trigger: 'blur' },
  ],
  repassword: [
    { required: true, message: '请再次输入您的密码', trigger: 'blur' },
  ],

})



//控制弹窗 默认关闭
const state = reactive({
  forgetPasswordDialog: false,
  changePasswordDialog: false
})
//打开弹窗
const open = () => {
  state.forgetPasswordDialog = true
}
//打开修改密码框
const changePasswordDialog = () =>{
  state.changePasswordDialog = true
  state.forgetPasswordDialog = false
}


defineExpose({
  open
})
</script>



<style scoped lang="scss">
.forget_password {

}
</style>
